<template>
  <div class="m-alert-wp" :class="{show: _d.visible}" @click="markClick">
  	<div class="container" @click.stop>
  		<div class="title">
	    	<span class="text">提示</span>
	    </div>
	    <div class="content">{{props.content}}</div>
	    <div class="footer">
	    	<button @click="handleOk">确定</button>
	    </div>
  	</div>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted, watch, getCurrentInstance } from 'vue'

	// 获取app对象
  const instance = getCurrentInstance();
  const app = instance.appContext.app;

	const props = defineProps({
		// 内容
		content: {
			type: String
		},
		// 确认
		onOk: {
			type: [null, Function]
		},
		// 点击ok是否关闭
		okClose: {
			type: Boolean,
			default: true
		},
		// 隐藏
		hide: {
			type: Function
		}
	})

	const _d = reactive({
		visible: false,
	})

	// 移除组件
	watch(() => _d.visible, (val) => {
		if(!val) {
			setTimeout(() => {
				app.unmount();
			}, 200);
		}
	})

	const open = () => {
		setTimeout(() => {
			_d.visible = true;
		}, 30);
	}
	const close = () => {
		_d.visible = false;
	}

	// 遮罩点击
	const markClick = () => {
		if(props.okClose) {
			close();
		}
	}

	const handleOk = () => {
		if(props.onOk) {
			props.onOk(close);
		}
		if(props.okClose) {
			close();
		}
	}

	defineExpose({
		open
	})

</script>
<style lang="less" scoped>
.m-alert-wp {
	position: fixed;
	z-index: 99;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity .2s;
	opacity: 0;
	&.show {
		opacity: 1;
		.container {
			opacity: 1;
			transform: scale(1);
		}
	}
	.container {
		width: 450px;
		background: #fff;
		overflow: hidden;
		border-radius: 8px;
		box-shadow: 0 0 12px 0 rgba(0,0,0,.1);
		transition: all .2s;
		opacity: 0;
		transform: scale(0.8);
	}

	.title {
		height: 70px;
		background: url(./top.png) no-repeat center;
		background-size: 100% 100%;
		color: #fff;
		line-height: 70px;
		text-align: center;
		font-size: 19px;
	}
	.content {
		padding: 50px 42px 40px;
		line-height: 30px;
		font-size: 16px;
	}
	.footer {
		padding-bottom: 46px;
		text-align: center;
		button {
			width: 100px;
			height: 36px;
			background: #2196F3;
			border-radius: 4px;
			color: #fff;
			text-align: center;
			outline: none;
			border: none;
			cursor: pointer;
			&:hover {
				background: #40a9ff;
			}
		}
	}
}
</style>